{extend name="public:base"}
{block name='css'}
{/block}

{block name='body'}
<div class="view view-main white-navbar white-page white-toolbar">
    <div data-name="home" class="page">

        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"><a href="{$back}" class="external"><i class="iconfont icon-fanhui"></i></a></div>
                <div class="center"><span>商品详情</span></div>
                <div class="right"></div>
            </div>
        </div>

        <div class="page-content ">

            <div class="swiper-container home-swiper-container">
                <div class="swiper-pagination home-swiper-pagination"></div>
                <div class="swiper-wrapper">
                    {volist name='info.imgs' id='vo'}
                    <div class="swiper-slide"><img src="{$vo}" /></div>
                    {/volist}
                </div>
            </div>

            <div class="goods-title">
                <div class="t">
                    <p class="p1">{$info.title}</p>
                    <!--<a href="javascript:alert(1);"><i class="iconfont icon-xinxing"></i>&nbsp;428</a>-->
                </div>
                <p class="p2">{$info.sub_title}</p>
                <p class="p3">
                    <span class="sp1">￥{$info.unit_price}</span>
                    <span class="sp2">销量：{$info.sale_num}</span>
                </p>
            </div>
            <!-- <div class="goods-bao">
                <span><i class="iconfont icon-dui"></i>即时配送</span>
                <span><i class="iconfont icon-dui"></i>保鲜储存</span>
                <span><i class="iconfont icon-dui"></i>冷链直达</span>
            </div> -->

            <!-- {if condition='$info.evaluate_score gt 0'}
            <div class="goods-score" onclick="window.location.href='{:url('evaluate',['goods_id'=>$info['id']])}'">
                <span class="z">商品评价</span>
                <span class="y">
                    {$info.evaluate_score|default='5'}
                    <i class="iconfont icon-jiantou"></i>
                </span>
            </div>
            {/if} -->

            <div class="goods-info">
                <div class="t">上拉查看更多详情</div>
                <div class="content">
                    {$info.content}
                </div>
            </div>

            <div style="width: 1px;height: 50px;"></div>
        </div>

        {if condition="input('ha') neq 1"}
        <div class="toolbar">
            <div class="goods-bottom">
                <a href="/" class="external a1"><i class="iconfont icon-shouye"></i></a>
                <!-- <a href="{:url('cart/index')}" class="external a1"><i class="iconfont icon-icozhuanhuan"></i><span class="badge color-red js-cart-num" {eq name='info.cart_num' value='0'}style="display:none;"{/eq}>{$info.cart_num}</span></a> -->
                {if $info.cate_id1==3}
                <a href="javascript:goodsNumber(2);" class="a3">加入购物车</a>
                {/if}
                <a href="javascript:goodsNumber(1);" class="a2">立即购买</a>
            </div>
        </div>

        <!--弹出层-->
        <form name="form" action="{:url('cart/place')}" id="form" method="get" onsubmit="return addCart();">
            <input type="hidden" name="goods_id" value="{$info.id}"/>
            <input type="hidden" name="spec" value=""/>
            <div class="goods-number" >
                <div class="m">
                    <a href="javascript:goodsNumber();" class="close">×</a>
                    <div class="t">
                        <img src="{$info.img}" alt="">
                        <div class="y">
                            <p class="p1">{$info.title}</p>
                            <p class="p2">￥{$info.unit_price}</p>
                        </div>
                    </div>
                    {notempty name='info.spec'}
                    <div class="number">
                        {volist name='info.spec.spec' id='vo'}
                        <p class="p1">{$vo.title}</p>
                        <p class="p2">
                            {volist name='vo.value' id='vv'}
                            <span data-key="{$key}">{$vv}</span>
                            {/volist}
                        </p>
                        {/volist}
                    </div>
                    {/notempty}
                    <div class="num" style="display: {$info.category1 >1?'flex':'none';}">
                        <p class="p1">数量</p>
                        <div class="nm">
                            <a href="javascript:jj(-1);">-</a>
                            <input type="number" value="1" name="num" readonly="readonly" >
                            <a href="javascript:jj(1);" class="">+</a>
                        </div>
                    </div>

                    <div class="sub"><input type="button" value="确定"></div>
                </div>
            </div>
        </form>
        {/if}
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript">
    var mySwiper = new Swiper('.home-swiper-container', {
        autoplay: {
            delay: 3000
        },
        pagination: {
            el: '.home-swiper-pagination'
        }
    });

    //规格被点击的时候
    var price_arr = {};
    /*{notempty name='info.spec'}*/
    price_arr = {$info.spec.price|json_encode=###};
    /*{/notempty}*/
    var spec_key = '';
    $(".number span").click(function(){
        spec_key = '';
        $(this).addClass('on').siblings().removeClass('on');
        $('.number .on').each(function(i,n){
            spec_key += $(n).attr('data-key');
        });
        if (!price_arr[spec_key]) {
            return false;
        }
        $(".goods-number .m .t .y .p2").text( '￥' + price_arr[spec_key].price );
        $('input[name=spec]').val(spec_key);
        /*
        var a = $(".number span") , b = a.index(this) ;
        a.removeClass('on').filter(':eq('+b+')').addClass('on') ;
        $('.number .on').each(function(i,n){
            spec_key += $(n).attr('data-key');
        });
        if (!price_arr[spec_key]) {
            return false;
        }
        $(".goods-number .m .t .y .p2").text( '￥' + price_arr[spec_key].price );
        $('input[name=spec]').val(spec_key);
        */
    });

    $('.number .p2').each(function(i,n){
        $(n).find('span').eq(0).click();
    });

    //点击加入购物车或立即购买
    var cartType = 0 ;
    function goodsNumber( val ){
        cartType = val ;
        $('.goods-number').toggle();
        $('.sub').attr("onclick", "verify("+val+")");
      
    }

    //数量加减
    function jj( val ) {
        var number = parseInt( $('input[name="num"]').val() ) ;
        if ( val + number >= 1 ) {
            $('input[name=num]').val( val+number ) ;
        }
    }

    //添加到购物车
    var ajaxOn = false ;
    function addCart()
    {
        if ( cartType == 1 ) {
            if (ajaxOn) {
                return false ;
            }
            ajaxOn = true ;
            $.post("{:url('cart/addCart')}", $("#form").serialize(), function(data){
                messageToast( data.info );
                if (data.data == 1) {
                    $('.js-cart-num').text(parseInt($('.js-cart-num').text()) + 1).show();
                }
                ajaxOn = false ;
            },'json');
            return false ;
        } else {
            return true ;
        }
    }
    //添加购物车及下单
    function verify(type) {

        let num = $('input[name=num]').val();
        // const frequency =  $('input:radio:checked').val();
        if (!num || num <= 0) {
            layer.msg('数量错误');
            return false;
        }
        let url = type == 1 ? '/submit' : '/save_cart';
		let load = layer.load(2);
		submit(type,url,num);
		layer.close(load);
    }
    function submit(type,url,num){
    	$.ajax({
			type: 'POST',
			url: url,
			data: {num: num, id: '{$info.id}'},
			dataType: "json",
			success: function (data) {
				if (type == 1) {
					if (data.code == 1) {
						location.href = "/place";
					} else if(data.code == -3){
						layer.msg(data.msg,{time:1000},function () {
							location.href = "/index/login/index";
						});
					}else {
						layer.msg(data.msg);
					}
				} else {
					if (data.code == 1) {
						layer.msg(data.msg);
						$('.num').text(data.num);
					}else if(data.code == -3){
						layer.msg(data.msg,{time:1000},function () {
							location.href = "/index/login/index";
						});
					}else {
						layer.msg(data.msg);
					}
				}
			}
		});
	}

</script>
{/block}